<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>作业</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>


<body>
  <button type="button" class="btn btn-default" id="add" data-toggle="modal" data-target="#myModal3">增加</button>
  <table id="table" class="table table-bordered">
    <thead>
      <tr>
        <th>名称</th>
        <th>城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr>
        <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr> -->
    </tbody>
  </table>


  <!-- 删除模态框（Modal） -->
  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            &times;
          </button>
          <h4 class="modal-title" id="myModalLabel">
            提示
          </h4>
        </div>
        <div class="modal-body">
          是否删除该条？
        </div>
        <div class="modal-footer">
          <button id="cancel" type="button" class="btn btn-default" data-dismiss="modal">取消
          </button>
          <button id="remove" type="button" class="btn btn-primary">
            确认
          </button>
        </div>
      </div>
    </div>
  </div>


  <!-- 修改模态框（Modal） -->
  <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            &times;
          </button>
          <h4 class="modal-title" id="myModalLabel">
            请填入修改信息
          </h4>
        </div>
        <div class="modal-body">
          <form class="delBox">
            <div class="row">
              <label class="col-sm-4">ID:</label><input class="col-sm-7" id="dataId" disabled type="text" />
            </div>
            <div class="row">
              <label class="col-sm-4">名称：</label><input id="dataName" class="col-sm-7" type="text" />
            </div>
            <div class="row">
              <label class="col-sm-4">城市：</label><input id="dataCity" class="col-sm-7" type="text" />
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" id="cancelBtn">取消
          </button>
          <button type="button" id="confirmBtn" class="btn btn-primary">
            确认
          </button>
        </div>
      </div>
    </div>
  </div>


  <!-- 新增模态框（Modal） -->
  <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            &times;
          </button>
          <h4 class="modal-title" id="myModalLabel">
            请填入新增信息
          </h4>
        </div>
        <div class="modal-body">
          <form id="addBox">
            <div class="row">
              <label class="col-sm-4">ID:</label><input id="addId" class="col-sm-7" type="text" />
            </div>
            <div class="row">
              <label class="col-sm-4">名称：</label><input id="addName" class="col-sm-7" type="text" />
            </div>
            <div class="row">
              <label class="col-sm-4">城市：</label><input id="addCity" class="col-sm-7" type="text" />
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消
          </button>
          <button id="confirmAdd" type="button" class="btn btn-primary">
            确认
          </button>
        </div>
      </div>
    </div>
  </div>
  <script>
    const data = [
      { id: 1, name: "李四", city: "重庆" },
      { id: 2, name: "张三", city: "成都" },
    ];
    //动态渲染
    function render(data) {
      //清空
      $("tbody").empty();
      for (let i = 0; i < data.length; ++i) {
        const item = data[i];
        $("tbody").append(
          `<tr>
          <td>${item.name}</td>
          <td>${item.city}</td>
          <td>
            <button data-id="${item.id}" id="delBtn" type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal1">删除</button>
            <button data-id="${item.id}" id="modBtn" type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal2">修改</button>
          </td>
        </tr> ` )
      }
    }
    render(data);
    //点击删除，弹出模态框
    $("tbody").on("click", "#delBtn", function (event) {
      const dataId = $(event.target).attr("data-id");
      //点击确认，删除
      $("#remove").on("click", function () {
        for (let i = 0; i < data.length; i++) {
          if (dataId == data[i].id) {
            data.splice(i, 1);
          }
        }
        $('#myModal1').modal('hide');
        render(data);
      })
      // 点击取消
      $("#cancel").on("click", function () {
        $("#remove").off("click");
      })
    })
    //点击修改，弹出模态框
    $("tbody").on("click", "#modBtn", function (event) {
      const dataId = parseInt($(event.target).attr("data-id"));
      // 展示弹窗
      $("#myModal2").show();


      const currentData = data.find((item) => {
        return item.id === dataId;
      });
      $("#dataId").val(currentData.id);
      $("#dataName").val(currentData.name);
      $("#dataCity").val(currentData.city);
    });

    // 关闭弹窗
    $("#cancelBtn").on("click", function () {
      $("#myModal2").hide();
    });
    // 确认修改
    $("#confirmBtn").on("click", (event) => {
      // 获取input的值
      const id = parseInt($("#dataId").val());
      const name = $("#dataName").val();
      const city = $("#dataCity").val();

      // 修改 data 
      for (let i = 0; i < data.length; ++i) {
        const item = data[i];
        if (item.id === id) {
          item.name = name;
          item.city = city;
        }
      }
      render(data)
      // 隐藏
      $("#myModal2").modal("hide");
    });
    // 新增
    let index = 2
    $("#add").on("click", function () {
     
      index += 1
      $("#addId").val(index)

    })
    $("#confirmAdd").on("click", function () {
      let addId = parseInt($("#addId").val())
      let addName = $("#addName").val()
      let addCity = $("#addCity").val()
      data.push({
        id: addId,
        name: addName,
        city: addCity
      })
      $("#myModal3").modal("hide");
      render(data)
    })

  </script>
</body>

</html>